<template>
  <div style="width:100vw;" class="class-center-box">
    <!-- 头部 -->
    <!-- <mt-header fixed title="课程申请">
      <router-link to="/StudyCenter" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>-->
    <div class="class-bar-box">
      <div class="bar-group flex-row">
        <div
          @click="faceBar()"
          :class="{'face-class':true, 'color-blue' :active=='tab-container1'}"
        >内部课程</div>
        <div
          @click="smallBar()"
          :class="{'small-class':true, 'color-blue' :active=='tab-container2'}"
        >外购外派</div>
      </div>
    </div>
    <div class="null-box"></div>
    <mt-tab-container v-model="active">
      <mt-tab-container-item id="tab-container1">
        <div class="patent-body">
          <div class="bscroll" ref="insertObj">
            <div :style="loadedDown ? 'padding-bottom:45px;' : ''" class="bscroll-container">
              <div class="default-page-box" v-show="!insertObj.length">
                <div class="default-page">
                  <div class="default-text">哎呀，空空如也!</div>
                </div>
              </div>
              <div v-for="(item,index) in insertObj" :key="index">
                <div v-if="item.courseType == 0 || item.courseType == 1">
                  <div
                    @click="goDetail(item.id,3,item.isSign,item.courseType)"
                    class="flex-row parent-body-item"
                  >
                    <div class="class-content">
                      <p class="content-tip">{{item.title}}</p>
                      <p class="content-time">培训时间：{{item.openTime}}</p>
                      <p class="content-bumen">归属部门：{{item.deptName || '外部导师'}}</p>
                      <p class="content-teacher">
                        <span style="color:#4787e4;margin-right:5px;" class="iconfont iconxingming"></span>
                        讲师：{{item.username}}
                      </p>
                    </div>
                    <div
                      class="class-status"
                    >{{item.isSign == 0 ? '未报名' : item.isSign == 1 ? '已报名' : ''}}</div>
                  </div>
                </div>
                <div
                  v-else
                  @click="goDetail(item.id,3,item.isSign,item.courseType)"
                  class="parent-body-item"
                >
                  <div class="flex-row class-video-top">
                    <div class="class-content">
                      <p class="content-tip">{{item.title}}</p>
                      <p class="content-time">观看时间：{{item.updateTime}}</p>
                    </div>
                    <div class="class-video"></div>
                  </div>
                  <div class="class-video-foot flex-row">
                    <div>微课程</div>
                    <!-- <div>已看</div> -->
                  </div>
                </div>
                <div class="divler"></div>
              </div>
              <div v-show="loadingDown" style="padding:10px;text-align:center;">
                <mt-spinner type="snake"></mt-spinner>
              </div>
              <div v-show="loadedDown" style="line-height:50px;text-align:center;">没有更多数据</div>
            </div>
          </div>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="tab-container2">
        <div class="default-page-box" v-show="thingsObj.length == 0">
          <div class="default-page">
            <div class="default-text">哎呀，空空如也!</div>
          </div>
        </div>
        <div class="bscroll" ref="thingsObj">
          <div :style="loadedDown ? 'padding-bottom:50px;' : ''" class="bscroll-container">
            <div class="class-box">
              <div v-for="(item,index) in thingsObj" :key="index" class="train-box">
                <div class="train-video-box">
                  <div class="train-video-head flex-row">
                    <div class="vide-head-img">
                      <!-- <img src="@/assets/homePicture/userpicture.png" alt /> -->
                      <div class="iconfont iconxinfeng2 plan-icon"></div>
                    </div>
                    <div style="flex:1 0 auto;">
                      <div style="margin-bottom:10px;" class="vide-head-text1">{{item.workDescribe}}</div>
                      <!-- <div class="vide-head-text2">{{item.workDescribe}}</div> -->
                      <div style="justify-content:space-between;" class="flex-row">
                        <div class="vide-head-text3">上传时间：{{item.createTime}}</div>
                        <div @click="getMediaFromDing(item)">
                          <a style="color:#4787E4;">
                            <i style="margin-right:5px;" class="iconfont iconxiazai"></i>
                            <span>下载</span>
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- <div v-show="loadingDown" style="padding:10px;text-align:center;">
              <mt-spinner type="snake"></mt-spinner>
            </div> -->
            <!-- <div v-show="loadedDown" style="line-height:50px;text-align:center;">没有更多数据</div> -->
          </div>
        </div>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>
<script>
// import Card from "@/components/card";
import BScroll from "better-scroll";
import { setText } from "../../untils/ddnavigate";
const easydate = require("../../untils/easydate");
import { Dinpan } from "../../untils/dinpan";
//qrySmallCourseInfo
export default {
  data() {
    return {
      thingsObj: [],
      active: "tab-container1",
      insertObj: [],
      pageTotal: "",
      params: {
        courseType: 0,
        page: 1,
        pageSize: 10
      },
      loadingDown: false,
      loadingUp: false,
      loadedDown: false
    };
  },
  mounted() {
    this.initScroll("thingsObj");
    setText("课程申请");
    let { params } = this;
    this.$post("qrySignCourse", params).then(res => {
      if (res.success) {
        res.data.map(function(item) {
          for (var key in item) {
            if (key == "openTime" || key == "updateTime") {
              item[key] = easydate(item[key]).format("yyyy-MM-dd");
            }
          }
        });
        this.insertObj = res.data;
        if (res.data && res.data.length > 0) {
          this.pageTotal = res.data && res.data[0].totals;
        }
        // better-scroll初始化
        this.initScroll("insertObj");
      }
    });
  },
  methods: {
    getMediaFromDing(params) {
      Dinpan.getMediaFromDing(params, this);
    },
    publicAjax(params) {
      this.$post("qrySignCourse", params).then(res => {
        if (res.success) {
          res.data.map(function(item) {
            for (var key in item) {
              if (key == "openTime" || key == "updateTime") {
                item[key] = easydate(item[key]).format("yyyy-MM-dd");
              }
            }
          });
          this.insertObj = this.insertObj.concat(res.data);
          if (res.data && res.data.length > 0) {
            this.pageTotal = res.data && res.data[0].totals;
          }
          this.loadingDown = false;
          this.loadingUp = false;
        }else{
          this.loadingDown = false;
          this.loadingUp = false;
        }
      });
    },
    initScroll(dom) {
      let that = this;
      that.$nextTick(() => {
        let bscrollDom = this.$refs[dom];
        let bScroll = new BScroll(bscrollDom, {
          click: true,
          probeType: 2,
          bounceTime: 700, //回弹时间
          pullUpLoad: {
            threshold: 0, // 当上拉距离超过50px时触发 pullingUp 事件
            stop: 50
          },
          useTransition: false // 防止iphone微信滑动卡顿
        });
        // bScroll.on("pullingDown", () => {
        //   that.loadingUp = true;
        //   that.loadedDown = false;
        //   that.params.page = 1;
        //   setTimeout(() => {
        //     that.classFunction(that.params, dom, "downLoad");
        //   }, 1000);
        //   bScroll.finishPullDown();
        // });
        bScroll.on("pullingUp", () => {
          let { pageTotal } = that;
          console.log(pageTotal);
          if (that[dom].length < pageTotal) {
            that.loadingDown = true;
            that.params.page++;
            setTimeout(() => {
              that.publicAjax(that.params, dom, "upLoad");
            }, 1000);
          } else {
            that.loadedDown = true;
          }
          bScroll.finishPullUp();
        });
        bScroll.refresh();
      });
    },
    faceBar() {
      let {params} = this;
      this.active = "tab-container1";
      this.params.page = 1;
      this.loadedDown = false;
      this.insertObj = [];
      this.publicAjax(params);
    },
    smallBar() {
      this.loadedDown = false;
      this.params.page = 1;
      let params = {
        type: "2", // ype类型    0人事制度1办事指南2外购外派
        page: 1,
        pageSize: 100,
        workType: "",
        deptName: ""
      };
      this.$post("qryHandleAffairsList", params).then(res => {
        if (res.success) {
          this.thingsObj = res.data.handleAffairs;
        }
      });
      this.active = "tab-container2";
    },
    goDetail(id, num, isSign, smallCourse) {
      if (smallCourse == 2) {
        this.$router.push({
          path: "/learnClass",
          query: { id }
        });
        return;
      }
      if (isSign == 1) {
        num = 4;
      }
      this.$router.push({
        path: "/classDetail",
        query: { id: id, statusNum: num }
      });
    }
  }
};
</script>
<style lang="less" scoped>
@import url("~@/pagecss/class-center.less");
.content-tip {
  width: 400/75rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.class-video {
  width: 259/75rem;
  height: 124/75rem;
  background: url("~@/assets/homePicture/detail1.jpg") 0 0 no-repeat;
  background-size: cover;
}
.class-video-foot,
.class-video-top {
  align-items: flex-start;
  justify-content: space-between;
}
.bscroll-container {
  padding-bottom: 95px;
}
.class-video-foot {
  margin-top: 20/75rem;
  padding-bottom: 10px;
  font-size: 18/75rem;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.5);
}
.divler {
  height: 15/75rem;
  background-color: #eeeeee;
}
.default-page-box {
  position: relative;
  height: 100vh;
}
.default-page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("~@/assets/studyCenter/null.png") 50% 30% no-repeat;
  background-size: 352/75rem 215/75rem;
}
.default-text {
  left: 0;
  right: 0;
  position: absolute;
  top: 45%;
  text-align: center;
  font-size: 30/75rem;
  font-weight: 400;
  color: rgba(110, 176, 246, 0.7);
}
.patent-body {
  .parent-body-item {
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 13/75rem;
    padding: 30/75rem 25/75rem 0 49/75rem;
    background-color: #ffffff;
    .content-tip {
      margin-bottom: 12/75rem;
      font-size: 26/75rem;
      font-weight: bold;
      color: rgba(0, 0, 0, 1);
    }
    .content-time {
      margin-bottom: 30/75rem;
      font-size: 18/75rem;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
    }
    .content-bumen,
    .content-teacher {
      font-size: 18/75rem;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.5);
    }
    .content-teacher {
      margin: 25/75rem 0 13/75rem;
    }
    .class-status {
      margin-top: 10/75rem;
      padding: 0 10/75rem;
      font-size: 24/75rem;
      font-weight: bold;
      color: rgba(71, 135, 228, 1);
      border: 0.5px solid rgba(71, 135, 227, 1);
      border-radius: 3px;
    }
  }
}
.null-class {
  height: 15/75rem;
  background-color: #eaeaea;
}
@rem: (@px / 75) * 1rem;
@px: 0;
.train-box {
  background-color: #ffffff;
  margin-bottom: 18/75rem;
  padding: 20/75rem @rem 0;
  @px: 41;
  .train-video-box {
    margin-top: 10px;
    @px: 41;

    .train-video-head {
      padding-bottom: 20/75rem;
      border-bottom: 0.5px solid #999999;
      .vide-head-img {
        position: relative;
        width: 86/75rem;
        height: 86/75rem;
        margin-right: 30/75rem;
        border-radius: 50%;
        overflow: hidden;
        background-color: #4787e4;
        .plan-icon {
          position: absolute;
          top: 50%;
          left: 50%;
          margin-top: -20/75rem;
          margin-left: -18/75rem;
          font-size: 36/75rem;
          color: #ffffff;
        }
      }

      .vide-head-text1 {
        font-size: 24/75rem;
        color: #4787e4;
      }

      .vide-head-text2 {
        margin: 14/75rem 0 10/75rem 0;
        font-size: 21/75rem;
        color: #999999;
      }

      .vide-head-text3 {
        font-size: 18/75rem;
        color: #999999;
      }
    }
    .train-video-footer {
      justify-content: space-between;
      padding: 15/75rem 80/75rem;
      font-size: 18/75rem;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
    }
  }
}
</style>